<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%- include('./common/header.html') %>
  <link rel="stylesheet" href="/assets/css/index.css">
  <title>博客首页</title>
</head>

<body>
<%- include('./common/nav.html') %>

<div class="container p-3">
  <h1>首页</h1>
  <hr>

  <!-- 博客列表数据 -->
  <% blogs.forEach(blog => { %>
  <div class="blog-item p-4 border-bottom">
    <h1 class="text-center mb-3"><a href="/blog/<%= blog._id %>" class="title"><%= blog.title %></a></h1>
    <p class="text-center pub-date"><%= blog.formattedCreateAt %></p>
    <p class="summary"><%= blog.summary %>...</p>
    <div class="text-center">
      <a class="btn btn-outline-warning read-more" href="/blog/<%= blog._id %>">阅读更多</a>
    </div>
    <div class="d-flex justify-content-between item-footer">
        <span>
          <span><%= blog.author.username %></span>
          <span class="last-update-date">最后修改于 <%= blog.formattedLastUpdateAt %></span>
        </span>
      <span><%= blog.cmtCount %> 评论</span>
    </div>
  </div>
  <% }) %>

  <!-- 分页 -->
  <ul class="pagination mt-4 justify-content-end">
    <li class="page-item <%= page <= 1 ? 'disabled' : '' %>">
      <a class="page-link" href="/?page=<%= page - 1 %>&pagesize=2">上一页</a>
    </li>
    <% for( let index = 0; index < totalPage; index++ ) { %>
    <li class="page-item <%= (index + 1) === page ? 'active' : '' %>"><a class="page-link"
                                                                         href="/?page=<%= index + 1 %>&pagesize=2"><%=
      index + 1 %></a></li>
    <% } %>
    <li class="page-item <%= page >= totalPage ? 'disabled' : '' %>">
      <a class="page-link" href="/?page=<%= page + 1 %>&pagesize=2">下一页</a>
    </li>
  </ul>

</div>
</body>

</html>